<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Kanban</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <div class="app">
        <header>
            <h1>任务看板</h1>
            <button id="add-column-btn" title="添加列">＋ 列</button>
        </header>

        <main id="board" class="board" aria-label="Kanban Board"></main>

        <footer>
            <button id="clear-btn">清空所有数据</button>
            <span class="hint">数据保存在浏览器扩展存储中</span>
        </footer>
    </div>

    <!-- 编辑/新增任务模态 -->
    <div id="modal" class="modal hidden" role="dialog" aria-modal="true">
        <div class="modal-content">
            <h2 id="modal-title">新增任务</h2>
            <label>
                标题
                <input id="task-title" type="text" />
            </label>
            <label>
                描述
                <textarea id="task-desc" rows="4"></textarea>
            </label>
            <div class="modal-actions">
                <button id="save-task-btn">保存</button>
                <button id="cancel-task-btn">取消</button>
            </div>
        </div>
    </div>

    <script src="popup.js"></script>
</body>

</html>